<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-08-02 23:57:14
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-07-08 22:50:59
 * @FilePath: \react\05.react中定义组件\05.react中定义组件--函数式组件.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="shortout" href="/favicon.ico" />
    <title>05.react中定义组件</title>
</head>

<body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel"> /* 此处一定要写babel */
    //1.创建函数式组件
    function MyComponent(){
        console.log("react" ,this)//此处的this是undefined ,因为babel编译后开启了严格模式
        return <h2>我是用函数定义的组件(适用于[简单的组件]的定义)</h2>
    }
    // 2,渲染组件到页面
    ReactDOM.render(<MyComponent/>,document.getElementById('test'))//必须写组件标签
    /**
     * 执行了ReactDOM.render(<MyComponent/>,document.getElementById('test')) 之后,发生了什么?
     * 1,React解析组件标签,找到了MyComponent组件.
     * 2,发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转换为真实DOM,随后呈现到页面中*/ 
    </script>
</body>

</html>